<template>
  <div class="venus-list-page">
    <!--自定义资产模板界面-->
    <div class="page-search">
      <el-row type="flex" class="search-list">
        <el-row type="flex" class="list-items">
          <div class="venus-input-box">
            <label>资产代码</label>
            <el-input
              v-model="table.assdept_table.ftool_code"
              class="venus-input-middle"
              placeholder="请输入资产代码"
            />
          </div>
          <div class="venus-input-box">
            <label>资产名称</label>
            <el-input
              v-model="table.assdept_table.ftool_name"
              class="venus-input-middle"
              placeholder="请输入资产名称"
            />
          </div>
          <div class="venus-input-box">
            <label>资产类别</label>
            <el-select
              v-model="table.assdept_table.t8_sys_adtype_id"
              class="venus-input-middle"
              placeholder="--请选择资产类别--"
            >
              <el-option
                v-for="(item) in dict.adTypeIdItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-row>
        <div class="venus-btn-box">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="">重置</el-button>
          <el-button type="primary" @click="addBean">新增</el-button>
        </div>
      </el-row>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">查询结果</div>
      </el-row>
      <table-pagination
        :dict-data="dict"
        :table-data="table.assdept_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        highlight-current-row
        :total="table.assdept_table.total"
        :page-size="table.assdept_table.limit"
        :now-page="table.assdept_table.nowPage"
        :operation-config="table.operationConfig"
      />
    </div>
    <el-dialog :title="dialog.assdeptType.title" :visible.sync="dialog.assdeptType.dlgFormVisible">
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="assdeptForm" :model="dialog.form" size="mini">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="资产类别"
              :label-width="dialog.dlgFormLabelWidth"
              prop="ad_name"
              :rules="dialog.formRules.ad_name"
            >
              <el-input v-model="dialog.form.ad_name"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-show="!dlgFormDisabled" slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="okHandler">新增</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'M82003',
    data() { // 数据定义
      return {
        dict:{
          adTypeIdItems:{},
        },
        table: {
          tableHeaderConfig: [ // 表头配置
            { prop: 'ftool_code', label: '资产代码' },
            { prop: 'ftool_name', label: '资产名称' },
            { prop: 'ad_name', label: '资产类别' },
            { prop: 'ad_calculation', label: '核算方式' },
            { prop: 'begindate', label: '起息日' },
            { prop: 'enddate', label: '到期日' },
            { prop: 'yield', label: '收益率(%)' },
            { prop: 'pay_freq', label: '付息频率' },
            { prop: 'first_pay', label: '首次付息日' },
            { prop: 'basedays', label: '计息基数' },
            { prop: 'risk_weight', label: '风险权重(%)' }
          ],
          operationConfig: { // 表格操作配置
            fixed: 'right',
            width: 200,
            operationButton: [
              // 每一个操作。value:操作文字；func:回调函数
              { value: '修改', func: this.myModify },
              { value: '复制', func: this.myCopy },
              { value: '删除', func: this.myDelete },
              { value: '详情', func: this.myInfo }
            ]
          },
          assdept_table:{
            total: 0,
            nowPage: 1,
            limit : 5,
            tableData: [], // 表格数据
            exeid:'',//exeid
            ftool_code: '', // 资产代码
            ftool_name: '', // 资产名称
            t8_sys_adtype_id: '' // 资产类别
          }
        },
        dialog: {
          formLabelWidth: '100px',
          formRules: {
            ad_name: [
              {required: true, message: '请输入资产类别', trigger: 'blur'}
            ],
          },
          form: {
            ad_name: '', // 资产类别

          },
          assdeptType: {
            title: '',
            dlgFormDisabled: false,
            formVisible: false,
            commit:''
          }
        },
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      // 页面初始化
      init: function() {

      },
      // 事件触发
      search() { // 查询函数

      },
      // ======================表格======================
      myModify(item, index) {
        console.log(item, index, '-----编辑对象')
      },
      myDelete(item, index) {
        console.log(item, index, '-----删除对象')
      },
      myInfo(item, index) {
        console.log(item, index, '-----对象详情')
      },
      myCopy(item, index) {
        console.log(item, index, '-----复制对象')
      },
      okHandler(formData, obj) {

      },
      addBean() {
        this.dlgTilte = '新增资产负债类别'
        this.dlgFormDisabled = false // 是否禁用输入框
        this.dlgOkHandler = 'addOk' // 自己定义调用那个函数
        this.$nextTick(() => {
          // this.$refs.dlgForm.resetField() // 这个在第一次点击新增的时候报错，点击修改在点击新增就不报错
          // 点击修改在点击新增，去掉校验提示
          this.$refs.dlgForm.clearValidate() // 必须写在$nextTick里面
        })
        this.dlgFormVisible = true
      },
      addOk(formData) {
        console.log('add', formData)
      },
    }
  }
</script>

<style scoped>
</style>
